<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>文字乱码动画</title>
		<style type="text/css">
			body {
  margin: 0;
  height: 100vh;
  font-family: Monospace, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: crimson;
}
span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: transparent;
  white-space: nowrap;
  font-size: 48px;
  line-height: 2em;
}
span:before {
  content: 'Hello';
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  text-indent: 0;
  color: white;
}
span:hover {
  animation: show .8s linear forwards;
}
@keyframes show {
  93% {
    color: transparent;
  }
  94% {
    color: white;
  }
  100% {
    color: white;
  }
}
span:hover:before {
  animation: texte .8s linear forwards;
}
@keyframes texte {
  0 {
    content: '4@,3SAscAi;9,bT4';
  }
  10% {
    content: '$R6?4dSj{qS<7Yh7';
  }
  20% {
    content: '+BDs73f;[u3^4Lgg';
  }
  30% {
    content: '{qS<7Yh7+BDs73f;';
  }
  50% {
    content: 'Ai;9,bT4$R6?4dSj';
  }
  60% {
    content: '[o3^4LggAi;9,bT4';
  }
  70% {
    content: 'qoj4BWy-?4dSj{qS';
  }
  80% {
    content: 'GonQ5Tye4LggAi;s';
  }
  90% {
    content: 'Go3d4<yecAi;9,bT';
  }
  100% {
    content: '';
  }
}

p {
  position: absolute;
  bottom: 10px;
  left: 20px;
}
		</style>
	</head>
	<body>
		<span>Good bye</span>

<p>hover centered text</p>
	</body>
</html>
